<template>
  <div class="demo-collapse">

    <div class="mt-4">

      <el-affix :offset="60.001">
        <el-input @keyup.enter='searchBtn' v-model="searchText" placeholder="输入搜索条件，用户名或者订单单号" class="input-with-select"
          size="large">
          <template #prepend>
            <!-- <el-select v-model="searchSelect" placeholder="选择" style="width: 115px" size="large">
                      <el-option :label="item.ryD_DemandTypeName" :value="item.ryD_DemandTypeNo"
                          v-for="item in DemandTypeList" v-bind:key="item.ryD_CompanyNo" />
                  </el-select> -->
            <span>搜索</span>

            <!-- <el-cascader :props="DemandTypeList"  style="width: 115px" size="large"/> -->
          </template>
          <template #append>
            <el-button :icon="Search" size="large" @click="searchBtn" />
            &nbsp;
            &nbsp;
            <el-divider direction="vertical" />
            &nbsp;
            &nbsp;

            <el-button @click="dialogShow = true">高级查询</el-button>
            &nbsp;
            &nbsp;
            <el-divider direction="vertical" />
            &nbsp;
            &nbsp;

            <el-tag class="ml-2"> 共 {{ listSum }} 条</el-tag>
          </template>
        </el-input>
      </el-affix>
    </div>
    <el-collapse accordion style="width: 100%;height: 50vh;" @change="collChange" v-loading="loading">
      <el-card>
        <el-space fill wrap direction="vertical" style="width: 100%" v-infinite-scroll="load"
          :infinite-scroll-disabled="disabled">
          <el-card :class="index % 2 == 1 ? 'boder-white' : 'boder-grey'" shadow="hover"
            v-for="(item, index) in list.demandList" v-bind:key="item.ryD_DemandId">
            <el-collapse-item :name="item.ryD_DemandId">
              <template #title>
                <div style="flex:1" @click.stop>
                  <el-descriptions class="margin-top" :title="item.ryD_UserName" :column="4">
                    <el-descriptions-item label="类别:">{{ item.ryD_DemandTypeName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="公司:">
                      <span v-for="cp in companyList" :key="cp">
                        <span v-if="cp.ryD_CompanyNo == item.ryD_Company">
                          {{ cp.ryD_CompanyName }}
                        </span>
                      </span>
                    </el-descriptions-item>
                    <el-descriptions-item label="事件等级:">
                      <el-tag class="mx-1" size="large" v-if="item.ryD_Level == 1">一般</el-tag>
                      <el-tag class="mx-1" size="large" type="info" v-if="item.ryD_Level == 2">紧急
                      </el-tag>
                      <el-tag class="mx-1" size="large" type="warning" v-if="item.ryD_Level == 3">
                        严重</el-tag>
                      <el-tag class="mx-1" size="large" type="danger" v-if="item.ryD_Level == 4">
                        重大</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="发起时间:">
                      {{ dateTimeSpan(item.ryD_UserStartTime) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="IT负责人:">
                      <span style="text-decoration:line-through;color:red;">{{item.ryD_OldItName}} </span> {{ item.ryD_Name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="IT联系方式:">
                      <span style="text-decoration:line-through;color:red;">{{item.ryD_OldItPhone}} </span> {{ item.ryD_Phone }}
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态:">
                      <el-tag class="mx-1" size="large" type="danger" v-if="item.ryD_State == 1">
                        未接单</el-tag>
                      <el-tag class="mx-1" size="large" type="warning" v-if="item.ryD_State == 2">
                        已接单</el-tag>
                      <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 3">
                        已处理</el-tag>
                      <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 4">
                        已评价</el-tag>
                      <el-tag class="mx-1" size="large" type="success" v-if="item.ryD_State == 5">
                        手动记录</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单单号:">
                      {{ item.ryD_DemandId }}
                    </el-descriptions-item>
                    <el-descriptions-item label="需求详情:">
                      <span style="font-weight: bold;">{{ item.ryD_DemandDetails }}</span>
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </template>
              <el-descriptions :column="4">
                <el-descriptions-item :span="4" label="图片附件:" v-if="item.ryD_Files">
                  <el-space direction="vertical" alignment="flex-start">
                    <el-skeleton style="width: 240px" :loading="loadingInfo" animated>
                      <template #template>
                        <el-skeleton-item variant="image" style="width: 100px; height: 100px" />
                        <div style="padding: 14px">
                          <el-skeleton-item variant="h3" style="width: 50%" />
                          <div
                            style=" display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px; ">
                            <el-skeleton-item variant="text" style="margin-right: 16px" />
                            <el-skeleton-item variant="text" style="width: 30%" />
                          </div>
                        </div>
                      </template>
                      <template #default>
                        <el-image style="width: 100px; height: 100px" :src="item" fit="contain"
                          v-for="(item, index) in files" :key="index" :preview-src-list="files"
                          :initial-index="index" />
                      </template>
                    </el-skeleton>
                  </el-space>
                </el-descriptions-item>
                <el-space direction="vertical" alignment="flex-start">
                  <el-skeleton style="width: 240px" :loading="loadingInfo" animated>
                    <template #template>
                      <el-skeleton-item variant="image" style="width: 100px; height: 100px" />
                      <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 50%" />
                        <div
                          style=" display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px; ">
                          <el-skeleton-item variant="text" style="margin-right: 16px" />
                          <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                      </div>
                    </template>
                    <template #default>
                      <el-image style="width: 100px; height: 100px" :src="item" fit="contain"
                        v-for="(item, index) in files" :key="index" :preview-src-list="files" :initial-index="index" />
                    </template>
                  </el-skeleton>
                </el-space>
                <el-descriptions-item label="用户联系方式:" v-if="item.ryD_UserPhone">{{ item.ryD_UserPhone }}
                </el-descriptions-item>
                <el-descriptions-item label="用户位置:" v-if="item.ryD_UserAddress">{{ item.ryD_UserAddress }}
                </el-descriptions-item>
                <el-descriptions-item label="用户IP地址:" v-if="item.ryD_UserIp">{{ item.ryD_UserIp }}
                </el-descriptions-item>
                <el-descriptions-item label="是否转单:" v-if="item.ryD_ToItId">{{ demandInfo.ryD_ToItId ==
                    null ? '否' : '已转单'
                }}
                </el-descriptions-item>

                <el-descriptions-item label="接单时间:" v-if="item.ryD_ItStartTime">{{ dateTimeSpan(item.ryD_ItStartTime)
                }}</el-descriptions-item>
                <el-descriptions-item label="处理完成时间:" v-if="item.ryD_ItEndTime">{{ dateTimeSpan(item.ryD_ItEndTime) }}
                </el-descriptions-item>
                <el-descriptions-item label="用户确认时间:" v-if="item.ryD_UserEndTime">{{
                    dateTimeSpan(item.ryD_UserEndTime)
                }}</el-descriptions-item>
                <el-descriptions-item :span="4" v-if="!item.ryD_UserEndTime"></el-descriptions-item>

                <el-descriptions-item label="问题原因:" :span="4" v-if="item.ryD_Reason">{{ item.ryD_Reason
                }}
                </el-descriptions-item>
                <el-descriptions-item label="解决方案:" :span="4" v-if="item.ryD_Solution">{{
                    item.ryD_Solution
                }}
                </el-descriptions-item>
                <el-descriptions-item label="是否加入知识库:" :span="4" v-if="item.ryD_Solution">
                  {{ (demandInfo.ryD_KBId == null) ? '否' : '是' }}
                </el-descriptions-item>
                <el-descriptions-item label="评价星级:" :span="4" v-if="item.ryD_Star">
                  <el-image src="/img/pinLunXinSelect.png" style="width: 30px;"
                    v-for="index in (item.ryD_Star == null ? 0 : item.ryD_Star)" :key="index">
                  </el-image>
                  <el-image src="/img/pinLunXin.png" style="width: 30px;"
                    v-for="index in (item.ryD_Star == null ? 5 : 5 - item.ryD_Star)" :key="index">
                  </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="评论内容:" :span="4" v-if="item.ryD_Evaluate">{{
                    item.ryD_Evaluate
                }}
                </el-descriptions-item>

              </el-descriptions>
            </el-collapse-item>
          </el-card>
          <el-card v-if="list.demandList.length == 0">
            <span>暂无需求</span>
          </el-card>
        </el-space>
      </el-card>
    </el-collapse>

    <el-config-provider :locale="locale">
      <el-dialog v-model="dialogShow" title="查询条件" :close-on-click-modal='false'>
        <el-form :inline="true" label-width="150px" :model="formCompletionOrder" style="">

          <el-form-item label="选择需求发起时间：">
            <el-date-picker v-model="formCompletionOrder.StartEndTime" type="datetimerange" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间" :clearable="false" />
          </el-form-item>
          <el-form-item label="订单单号：">
            <el-input type="text" v-model="formCompletionOrder.RYD_DemandId" />
          </el-form-item>
          <el-form-item label="发起人姓名：">
            <el-input type="text" v-model="formCompletionOrder.RYD_UserName" />
          </el-form-item>
          <el-form-item label="需求类别">
            <el-select v-model="formCompletionOrder.RYD_TypeId" placeholder="请选择事件类别" clearable multiple>
              <el-option :label="item.ryD_DemandTypeName" :value="item.ryD_DemandTypeNo + ''"
                v-for="(item, index) in levelColumnsDemandType" v-bind:key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="需求级别">
            <el-select v-model="formCompletionOrder.RYD_Level" placeholder="请选择需求级别" clearable multiple>
              <el-option :label="item.ryD_DemandLevelName" :value="item.ryD_DemandLevelNo"
                v-for="(item, index) in levelColumns" v-bind:key="index" />
            </el-select>
          </el-form-item>
          <el-form-item label="需求状态">
            <el-select v-model="formCompletionOrder.RYD_State" placeholder="请选择需求状态" clearable multiple>
              <el-option label="未接单" value="1" />
              <el-option label="已接单" value="2" />
              <el-option label="已完成" value="3" />
              <el-option label="已评价" value="4" />
              <el-option label="手动记录" value="5" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogShow = false" type="info">取消</el-button>
            <el-button @click="queryBtn" type="primary">查询</el-button>
            <el-button @click="dcBtn" v-loading.fullscreen.lock="fullscreenLoading">导出</el-button>
          </span>
        </template>
      </el-dialog>
    </el-config-provider>
  </div>
</template>

<script setup >
// eslint-disable-next-line no-unused-vars
import { Search, Collection, Avatar, Document, Management } from '@element-plus/icons-vue'
// eslint-disable-next-line no-unused-vars
import { inject, reactive, ref } from 'vue';
import axios from '@/utils/axios';
import dateTimeSpan from '@/utils/dateTime';
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// eslint-disable-next-line no-unused-vars
import { useRoute, useRouter } from 'vue-router';


const fullscreenLoading = ref(false)
let loading = ref(true);
let disabled = ref(true);
let RYD_UserId = inject('RYD_UserId');
let activeState = ref(['1', '2', '3', '4', '5']);
let RYD_Company = ref();
let companyList = ref();
let searchText = ref('');
let locale = zhCn;
let listSum = ref(0);
// let searchSelect = ref(0);
const loadingInfo = ref(true)
const dialogShow = ref(false)
const formCompletionOrder = ref({
  StartEndTime: [new Date(new Date().getFullYear() + "/" + (new Date().getMonth() + 1) + "/01"), new Date()],
  RYD_DemandId: '',
  RYD_UserName: '',
  RYD_Level: '',
  RYD_TypeId: '',
  RYD_State: '',

})
let levelColumns = ref();
let levelColumnsDemandType = ref();

// let files = ref([]);
//定义请求转递参数
let M_DemandList = ref({
  RYD_UserId: null,
  RYD_State: activeState.value,
  RYD_Company: RYD_Company.value,
  Sum: -1,
  Page: 1,
  Size: 20,
  DemandList: [],
  RYD_DemandId: 0,
  RYD_UserName: '',
  StartDateTime: new Date('2021-01-01'),
  EndDateTime: new Date('2090-01-01'),
  SortField: " RYD_DemandList.RYD_CreateTime desc ",
  SortFun: "",
});
//定义订单字段
let demandInfo = ref({
  ryD_Company: null,
  ryD_CreateBy: null,
  ryD_CreateTime: null,
  ryD_DemandDetails: null,
  ryD_DemandId: null,
  ryD_Evaluate: null,
  ryD_Files: null,
  ryD_Id: null,
  ryD_ItEndTime: null,
  ryD_ItId: null,
  ryD_ItStartTime: null,
  ryD_KBId: null,
  ryD_Level: null,
  ryD_ModifyBy: null,
  ryD_ModifyTime: null,
  ryD_Reason: null,
  ryD_Solution: null,
  ryD_Star: null,
  ryD_State: null,
  ryD_ToItId: null,
  ryD_TypeId: null,
  ryD_UserAddress: null,
  ryD_UserEndTime: null,
  ryD_UserId: null,
  ryD_UserIp: null,
  ryD_UserName: null,
  ryD_UserPhone: null,
  ryD_UserStartTime: null,
});
//存储图片地址
let files = ref([]);
//存储订单列表
let list = ref({
  demandList: []
});
let dcBtn = () => {
  fullscreenLoading.value = true;
  axios({
    method: 'post',
    url: '/api/DemandConfirmationExcel',
    data: {
      RYD_DemandId: formCompletionOrder.value.RYD_DemandId.trim() != "" ? formCompletionOrder.value.RYD_DemandId.trim() : 0,
      RYD_UserName: formCompletionOrder.value.RYD_UserName,
      RYD_Level: formCompletionOrder.value.RYD_Level != "" ? formCompletionOrder.value.RYD_Level : undefined,
      RYD_TypeId: formCompletionOrder.value.RYD_TypeId != "" ? formCompletionOrder.value.RYD_TypeId : undefined,
      RYD_State: formCompletionOrder.value.RYD_State != "" ? formCompletionOrder.value.RYD_State : undefined,
      StartDateTime: new Date(formCompletionOrder.value.StartEndTime[0].setHours(formCompletionOrder.value.StartEndTime[0].getHours()+8)),
      EndDateTime: new Date(formCompletionOrder.value.StartEndTime[1].setHours(formCompletionOrder.value.StartEndTime[1].getHours()+8)),
      RYD_Company: RYD_Company.value,
      Sum: -1,
      Page: 1,
      Size: 10000,
    },
    responseType: 'blob'
  }).then(res => {
    fullscreenLoading.value = false;
    let blob = new Blob([res.data], { type: res.data.type });
    // 针对于 IE 浏览器的处理, 因部分 IE 浏览器不支持 createObjectURL
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, res.fileName);
    } else {
      var downloadElement = document.createElement("a");
      var href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = res.fileName; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉 blob 对象
    }
  }).catch(() => {
    fullscreenLoading.value = false;
  })
}
let queryBtn = () => {
  searchType = 1;
  list.value.demandList = [];
  M_DemandList.value.Page = 1;
  getDemandListV();
}
let searchType = 0;
//搜索功能
let searchBtn = () => {
  searchType = 0;
  list.value.demandList = [];
  M_DemandList.value.Page = 1;
  getDemandList();
}
//触底加载
let load = () => {
  if (searchType == 0) {
    getDemandList();
  } else {
    getDemandListV();
  }
}
//点击订单查看详情
let collChange = (item) => {
  if (item == "") { return }
  axios({
    method: 'get',
    url: '/api/DemandInfo?RYD_DemandId=' + item
  }).then(res => {
    demandInfo.value = res;
    if (demandInfo.value.ryD_Files != null) {
      files.value = demandInfo.value.ryD_Files.split('|');
    }
    if (files.value.length > 0) {
      if (files.value[files.value.length - 1] == '|' || files.value[files.value.length - 1] == '') {
        files.value.splice(files.value.length - 1)
      }
    }
    loadingInfo.value = false;
  })
}

let getDemandListV = () => {

  loading.value = true;
  disabled.value = true;
  axios({
    method: 'post',
    url: '/api/DemandConfirmation',
    data: {
      RYD_DemandId: formCompletionOrder.value.RYD_DemandId.trim() != "" ? formCompletionOrder.value.RYD_DemandId.trim() : 0,
      RYD_UserName: formCompletionOrder.value.RYD_UserName,
      RYD_Level: formCompletionOrder.value.RYD_Level != "" ? formCompletionOrder.value.RYD_Level : undefined,
      RYD_TypeId: formCompletionOrder.value.RYD_TypeId != "" ? formCompletionOrder.value.RYD_TypeId : undefined,
      RYD_State: formCompletionOrder.value.RYD_State != "" ? formCompletionOrder.value.RYD_State : undefined,
      StartDateTime: new Date(formCompletionOrder.value.StartEndTime[0].setHours(formCompletionOrder.value.StartEndTime[0].getHours()+8)),
      EndDateTime: new Date(formCompletionOrder.value.StartEndTime[1].setHours(formCompletionOrder.value.StartEndTime[1].getHours()+8)),
      RYD_Company: RYD_Company.value,
      Sum: -1,
      Page: M_DemandList.value.Page,
      Size: 20,
    }
  }).then(listres => {
    list.value.demandList.push(...listres.demandList);
    loading.value = false;
    disabled.value = false;
    listSum.value = listres.sum;
    // if (listres.demandList.length < 1) {
    //     finished.value = true;
    // }
    // finished.value = true;
    if (listres.demandList.length < 1) {
      disabled.value = true;
    }
  })
  M_DemandList.value.Page += 1;
}
//获取订单列表
let getDemandList = () => {
  loading.value = true;
  disabled.value = true;
  var numReg = /^[0-9]+$/

  var numRe = new RegExp(numReg)
  if (!numRe.test(searchText.value)) {
    M_DemandList.value.RYD_DemandId = undefined;
    M_DemandList.value.RYD_UserName = searchText.value;
  } else {
    M_DemandList.value.RYD_DemandId = searchText.value;
  }
  axios({
    method: 'post',
    url: '/api/DemandConfirmation',
    data: {
      ...M_DemandList.value
    }
  }).then(listres => {
    list.value.demandList.push(...listres.demandList);
    loading.value = false;
    disabled.value = false;
    listSum.value = listres.sum;
    // if (listres.demandList.length < 1) {
    //     finished.value = true;
    // }
    // finished.value = true;
    if (listres.demandList.length < 1) {
      disabled.value = true;
    }
  })
  M_DemandList.value.Page += 1;
}
//页面初始化，获取基本信息
let initData = () => {
  Promise.all(
    [
      axios({
        method: 'get',
        url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
      }).then(res => {
        RYD_Company.value = res;
        M_DemandList.value.RYD_Company = res;
        axios({
          method: 'get',
          url: '/api/DemandType?RYD_Company=' + res,
        }).then(res => {
          levelColumnsDemandType.value = res;
        })
        // listCheck.value = true;
        getDemandList();
        disabled.value = false;
        // getDemandNum();
        // axios({
        //     method: 'get',
        //     url: '/api/DemandType?RYD_Company=' + res
        // }).then(resT => {
        //     DemandTypeList.value.push({
        //         ryD_DemandTypeName: '全部', ryD_DemandTypeNo: 0, ryD_UserId: null, ryD_Company: null
        //     })
        //     DemandTypeList.value.push(...resT);
        // })
      }),
      axios({
        method: 'get',
        url: '/api/SetCompany'
      }).then(res => {
        companyList.value = res;
      }),

      axios({
        method: 'get',
        url: '/api/DemandLevels',
      }).then(res => {
        levelColumns.value = res;
      }),
    ]
  ).then(() => {
  })

}
initData();
</script>
<style>
/* .el-collapse-item__wrap{
  border: 0;
}
.el-collapse-item__header{
  border: 0;
} */
.demo-collapse .el-collapse-item__header {
  height: auto;
}

.boder-blue {
  border: 5px solid rgba(0, 106, 255, 0.2);
}

.boder-yellow {
  border: 5px solid rgba(255, 255, 0, 0.3);
}

.boder-orange {
  border: 5px solid rgba(255, 165, 0, 0.2);
}

.boder-red {
  border: 5px solid rgba(255, 0, 0, 0.2);
}

.boder-grey {
  border: 5px solid rgb(70, 108, 163, 0.4);
}

.boder-white {
  border: 5px solid rgb(70, 108, 163, 0.1);
}

.demo-collapse .margin-top>.el-descriptions__header {
  margin: 0;
}
</style>

